<template>
    <div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                    v-model="loading"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <div class="mylist" v-for="(item,index) in newslist" :key="index" style="display:flex" @click="selectNews(item.articleId)">
                    <div class="newsleft">
                        <img :src="item.bannerImgUrl" alt="">
                    </div>
                    <div class="newsright" >
                        <div style="overflow: hidden">
                            <span class="pull-left">{{item.articleSource}}</span>
<!--                            <span class="pull-right" >了解更多></span>-->
                        </div>
                        <div v-html="item.title" style="margin-top:10px;text-align:left;"></div>
                        <div v-html="item.createTime" style="position: absolute;bottom:6px"></div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import {Newslist} from "../api/api"

    export default {
        name: "Newslist",
        data(){
            return{
                newslist:[],
                loading: false,
                finished: false,
                refreshing: false,
                num:1,
                id:""
            }
        },
        props:{
            categoryId:{
                type:Number,
                default:1
            },

        },
         methods: {
             onLoad() {
                 setTimeout(() => {
                     if (this.refreshing) {
                         this.newslist = [];
                         this.refreshing = false;
                     }

                     Newslist(this.num,10,this.categoryId).then(res=>{
                         console.log(res.rows);
                         this.newslist=this.newslist.concat(res.rows);
                         this.num+=1;
                         console.log(this.num);
                         this.loading = false;
                     })


                     if(this.newslist.length>=this.num*10){
                         this.finished = true;
                     }
                 }, 1000);
             },



             onRefresh() {
                 // 清空列表数据
                 this.finished = false;

                 // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();

            },

             selectNews(articleId){
              this.$router.push({path:'/newsInfo',query:{id:articleId}})
             }
         },
    }
</script>

<style scoped>
    .mylist{
        display: flex;
    }
    .mylist>div{
        box-sizing: border-box;
    }
    .newsleft{
        width:45%;
        padding:5px;
    }
    .newsleft>img{
        width:100%;
        height:110px;
        min-height: 110px;

    }
    .newsright{
        position: relative;
        width:55%;
        padding:5px;
        font-size:14px;
    }
    .pull-left{
        float:left;
        color:red;
    }
    .pull-right{
        float:right;
        color: #ccc;
    }

</style>